<template>
	<div class="enter">
		<div class="template" v-show="loading">
			<div><mt-spinner :type="3" :size="60"></mt-spinner></div>
		</div>
		<div class="header">
			<h2>友惠家</h2>
			<span>精选友惠社区</span>
		</div>
		<form>
			<label> 
				<input type="tel" class="tel" placeholder="请输入手机号" ref="phone" maxlength="11" @blur="tel"/>
				<div class="yan-dd" v-show='show'>请输入正确的手机号</div>
			</label>
			<label> 
				<input type="password" class="tel" placeholder="请输入密码" ref="passwords" @blur="pass"/>
				<div class="yan-dd" v-show='showw'>请输入正确的密码</div>
			</label>
		</form>
		<!--<div class="deng">
			<span @click="dx">短信快捷登录</span>
			<span>忘记密码</span>
		</div>-->
		<input type="buttom" value="登陆" class="login" @click="login" :disabled="loading"/>
		<!--:disabled="xiann"-->
		<div class="zhanhu">
			<span>没有账号？</span>
			<span @click="zu">免费注册</span>
		</div>
	</div>
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { Toast } from 'mint-ui';
	export default{
		data(){
			return{
				show:false,
				showw:false,
				xiann:true,                
				token:'',
				id:'',
				loading:false,
				url:''
			}
		},
		created(){
			this.url = this.$route.query.url;
		},
		methods:{
			tel:function(){
//				 var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; 
				 var tel = this.$refs.phone.value
				  	if(tel.length != 11){
						Toast({
							message: "请输入正确的手机号",
							position: 'middle',
							duration: 3000
						})				  		
				  	}
//				       if(tel.length==0) 
//				       { 
//				       	this.show = true
//				       }
//				       if(tel.length!=11) 
//				       { 
//				       	this.show = true
//				       }
			},
			pass:function(){
				 var passwords = this.$refs.passwords.value;
				 if(passwords == ''){
					Toast({
						message: "请输入正确的密码",
						position: 'middle',
						duration: 3000
					})				  		
				}
				 
//				  if(passwords == ''){
//				  	this.showw = true
//				  	this.xiann= true
//				  }else{
//				  	this.showw = false
//				  	this.xiann= false
//				  }
			},
			login:function(){
				this.loading = true
				var passwords = this.$refs.passwords.value;
				var phone = this.$refs.phone.value;
//				if(passwords ==''){
//					this.showw = true
//				}else{
//					this.showw = false
//				}
//				if(phone ==''){
//					this.show = true
//				}else{
//					this.show = false
//				}
				if(passwords =='' && phone ==''){
					Toast({
						message: "请输入手机号,密码",
						position: 'middle',
						duration: 3000
					})
					this.loading = false
				}else{
					var url = BaseUrl + "login/in?" + "phone=" + phone + "&pwd=" + passwords + "&appId=wap"
					
					
					this.$http.get(url).then(res => {
						if(res.data.code == '10000'){
								this.loading = false
								this.neirong = res
//								console.log(res.data.data)
								this.token = res.data.data.token;
								this.userid = res.data.data.userid;
								localStorage.setItem("token",this.token);
								localStorage.setItem("userId",this.userid);
								this.id = localStorage.getItem('yunId')
								var url = localStorage.getItem("url")
								if(this.url != 1){
									this.$router.push({
										path: '/redpackage?type=1' + "&goodsId=" + this.id 
									})
								}else{
									window.location.href  = url
								}
						}else{
							this.loading = false;
							Toast({
									message: res.data.msg,
									position: 'middle',
									duration: 3000
							});
						}
					}).catch(res=>{
						this.loading = false
						Toast({
							message: "网络异常",
							position: 'middle',
							duration: 3000
						})
					})
				}
				
			},
			zu:function(){
				this.$router.push({ path: '/enroll' })
			}
			
		}
	}
</script>

<style scoped="scoped">
	html,body,.enter{
		width: 100%;
		height: 100%;
		background: url(../assets/images2/bei.png);
		background-size: 100% 100%;
	}
	.enter{
		height: 13.5rem;
	}
	.template{
		width: 100%;
		height: 100%;
/*		background: rgba(0,0,0,0.5);*/
		position: absolute;
		z-index: 99;
	}
	.template div{
		position: absolute;
		top: 5.5rem;
		left: 3rem;
	}
	.header{
		width: 100%;
		text-align: center;
		padding-top: 1.54rem;
	}
	.header h2{
		font-family: PingFangSC-Regular;
		font-size: 0.64rem;
		color: #FFFFFF;
	}
	.header span{
		font-family: PingFangSC-Regular;
		font-size: 0.2rem;
		display: block;
		color: #FFFFFF;
		margin-top: -0.1rem;
		margin-bottom: 2.24rem;
	}
	form{
		width: 100%;
		text-align: center;
	}
	.tel{
		width: 6rem;
		height: 0.82rem;
		outline: none;
		text-indent: 0.29rem;
		font-size: 0.3rem;
		color: rgba(255,255,255,0.5);
		background: rgba(255,255,255,0);
		border-radius: 0.5rem;
		border: 1px solid #ffffff;
		margin-bottom:0.5rem ;
	}
	.deng{
		font-size: 0.28rem;
		color: #ffffff;
		font-family: "PingFangSC-Regular";
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 0.37rem;
	}
	.login{
		display: block;
		width: 6rem;
		height: 0.82rem;
		background: #ffffff;
		font-size: 0.32rem;
		color: #FF2040 ;
		font-family: "PingFangSC-Medium";
		margin: 0 auto;
		text-align: center;
		line-height: 0.82rem;
		margin-top: 0.58rem;
		border-radius: 0.5rem;
		outline: none;
	}
	.zhanhu{
		font-size: 0.28rem;
		font-family: "PingFangSC-Regular";
		text-align: center;
		margin-top: 0.57rem;
	}
	.zhanhu span:last-child{
		color: #ffffff;
	}
	.zhanhu span:first-child{
		color: rgba(255,255,255,0.5);
	}
	.yan-dd{
		margin-top: -0.25rem;
		margin-bottom: 0.2rem;
	}
</style>